import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import { AtToast } from "taro-ui"
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import Report from '../../components/Report'
import PageFooterInfo from '../../components/PageFooterInfo'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, servicePhoneNumber, subtime} from '../../utils/common'

import './personnel_center.less'
import './position_detail.less'
import icon_47 from '../../assets/img/icon_47.png'
import iconCollection from "../../assets/img/icon_03.png";
import iconCollection_on from "../../assets/img/icon_03_on.png";

// 工程人才中心-详情
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Detail extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    isVip: false,
    info:{},
    samePositionInfo: [],
    isCollection: false,
    isTips: false,
    tipsText: ''
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'职位详情' })
    let id = this.$router.params.id
    if(!id) { getRuntime().navigateBack()}
    this.getInfomationInfos(parseInt(id))
    let userInfo = getRuntime().getUserInfo()
    //console.log(userInfo)
    if(userInfo&&userInfo.agencyLevel>0){ this.setState({isVip: true}) }
    let isCollection = parseInt(this.$router.params.isCollection)
    if(isCollection===1){ this.setState({ isCollection: true }) }
    this.getSamePositionInfo()

  }

  componentDidShow(): void {
  }

  // 获取相关工作职位
  getSamePositionInfo() {
    let samePositionInfo = getRuntime().getStorage('positionInfo')
    let tmp = []
    if(samePositionInfo.length>0){
      samePositionInfo.map(item => {
        if(item.publicationType === 3){
          tmp.push(item)
        }
      })
    }
    this.setState({
      samePositionInfo: tmp
    })
  }

  getInfomationInfos(formId) {
    let { homeStore } = this.props.stores
    homeStore.getInfomationInfos({
      formId,
      callback: res => {
        //console.log(home)
        let isCollection = parseInt(this.$router.params.isCollection) === 1 ? true : toJS(res.isCollection)
        this.setState({
          info: toJS(res),
          isCollection
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  toggleCollection(){
    if(!getRuntime().getToken()) {
      Taro.showModal({
        title:'请先进行登录',
        content:'',
        confirmText:'前往登录',
      }).then(res => {
        if(res.confirm){
          getRuntime().navigateTo('/pages/login/login')
        }
      })
      return
    }
    let { userStore } = this.props.stores
    this.setState({
      isCollection: !this.state.isCollection
    }, () => {
      if(this.state.isCollection){
        // 收藏
        userStore.saveUserCollection({
          form: {
            informationsId:parseInt(this.$router.params.id),
            userCollectionType:2
          },
          callback: () => {
            //this.setState({isTips: true, tipsText: '收藏成功~'})
          }
        })
      }else {
        // 取消收藏
        userStore.cancelUserCollection({
          form: {
            id: parseInt(this.$router.params.id),
            userCollectionType: '2',
          },
          callback: () => {
            //this.setState({isTips: true, tipsText: '取消收藏成功~'})
          }
        })
      }
    })
  }

  componentDidHide(): void {
   // Taro.removeStorageSync('positionInfo')
  }

  makePhone(phone?:string) {
    if(!phone){phone = servicePhoneNumber;  return}
    getRuntime().makePhoneCall(phone)
  }

  render() {
    let { isVip,info,samePositionInfo,isCollection,isTips,tipsText } = this.state
    return (
      <View className='personnel-detail'>
        <View className='list-07-item'>
          <View className='item-title'>
            <View className='title'>
              {info.positionName}
            </View>
            <View className='address' onClick={this.toggleCollection.bind(this)}>
              {!isCollection&&  <Image  className='icon-collection' src={iconCollection} />}
              {isCollection&&  <Image  className='icon-collection' src={iconCollection_on} />}
              <Text className='name-collection'>收藏</Text>
              <AtToast isOpened={isTips} text={tipsText} />
            </View>
          </View>
          <Text className='op'>{info.monthlyPay}</Text>
          <View className='item-info'>
            <View className='info'>
              <Text className='i'>发布：{subtime(info.creationTime)}</Text>
            </View>
            <View className='btn-view'>
              浏览{info.numberOfVisits}人
            </View>
          </View>
        </View>
        <View className='interval' />

        <View className='column-title'>
          <Text className='column-name'>招聘信息</Text>
        </View>
        <View className='item-lawyer'>
            <View className='line'>
              <Text className='title'>招聘人数：</Text>
              <Text className='name'>{info.recruitment}人</Text>
            </View>
            <View className='line'>
              <Text className='title'>学历：</Text>
              <Text className='name'>{info.education}</Text>
            </View>
            <View className='line'>
              <Text className='title'>工作经验：</Text>
              <Text className='name'>{info.workExperience }</Text>
            </View>
            <View className='line'>
              <Text className='title'>职称：</Text>
              <Text className='name'>{info.technicalTitle}</Text>
            </View>
            <View className='line'>
              <Text className='title'>月薪：</Text>
              <Text className='name'>{info.monthlyPay}</Text>
            </View>
            <View className='line'>
              <Text className='title'>工作性质：</Text>
              <Text className='name'>{info.jobNature }</Text>
            </View>
            <View className='line'>
              <Text className='title'>工作地点：</Text>
              <Text className='name'>{info.address}</Text>
            </View>
        </View>
        <View className='interval' />

        <View className='column-title'>
          <Text className='column-name'>职位简介</Text>
        </View>
        <View className='item-lawyer-desc'>
          {info.description}
        </View>
        <View className='interval' />
        <View className='column-title'>
          <Text className='column-name'>企业简介</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>企业名称：</Text>
            <Text className='name'>{info.companyName}</Text>
          </View>
          <View className='line'>
            <Text className='title'>企业性质：</Text>
            <Text className='name'>{info.natureOfTheFirm}</Text>
          </View>
          <View className='line'>
            <Text className='title'>企业规模：</Text>
            <Text className='name'>{info.enterpriseScale}</Text>
          </View>
          <View className='line'>
            <Text className='title'>企业地址：</Text>
            <Text className='name'>{info.area}</Text>
          </View>
          <View className='line'>
            <Text className='title'>企业简介：</Text>
            <Text className='name'>{info.enterpriseIntroduce}</Text>
          </View>
        </View>
        <View className='interval' />

        <View className='column-title'>
          <Text className='column-name'>联系方式</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>联系人：</Text>
            <Text className='name'>{info.contactsName}</Text>
          </View>
          <View className='line'>
            <Text className='title'>联系电话：</Text>
            <Text className='name'>{info.phoneNumnber}</Text>
          </View>
          <View className='line'>
            <Text className='title'>微信号：</Text>
            <Text className='name'>{info.wechatNumber}</Text>
          </View>
          <View className='line'>
            <Text className='title'>QQ号：</Text>
            <Text className='name'>{info.qqNumber}</Text>
          </View>
        </View>
        <View className='interval' />

        {
          samePositionInfo.length>0&&
          <View className='column-title content-30'>
             <Text className='column-name'>其他职位</Text>
             <Text className='column-more' onClick={this.handelRouter.bind(this, '/pages/newest/index')}>查看更多 > </Text>
          </View>
        }
        {
          samePositionInfo.length>0&&
          <View className='list-06'>
            {
              samePositionInfo.map(item => {
                return (
                  <View className='list-06-item' onClick={this.handelRouter.bind(this, '/pages/newest/position_detail?id='+item.id)}>
                    <View className='item-title'>
                      <View className='title'>
                        {item.positionName}
                        <Text className='label'>{item.jobNature}</Text>
                      </View>
                      <View className='address'>{item.address}</View>
                    </View>
                    <View className='item-info'>
                      <View className='info'>
                        <Text className='op'>{item.monthlyPay}</Text>
                        <Text className='i'>{item.education}</Text>
                        <Text className='i brnone'>{item.recruitment}人</Text>
                      </View>
                      <View className='btn-view'
                            onClick={this.handelRouter.bind(this, '/pages/newest/position_detail?id=' + item.id)} >
                        查看
                      </View>
                    </View>
                  </View>
                )
              })
            }
          </View>
        }

        <View className='interval' />
        <Report />
        <View className='interval' />
        <PageFooterInfo />
        <View className='footer-block' />
        <View className='position-footer-btn'>
          <View className='phone' style={{width: '100%'}} onClick={this.makePhone.bind(this)}>
            <Image src={icon_47} className='icon' />
            <View>电话资讯</View>
          </View>
          {/*<View className='apply'>申请该职位</View>*/}
        </View>
      </View>
    )
  }
}

export default Detail
